<template>
  <div class="content">
    <el-form
      :inline="true"
      :model="form"
      size="small"
      class="searchForm bg-gray flex flex-wp flex-a-c"
    >
      <el-form-item label="问题名称">
        <el-input v-model.trim="form.question"></el-input>
      </el-form-item>
      <el-form-item label="状态:">
        <el-select
          v-model="form.status"
          placeholder="请选择状态"
          filterable
          clearable
        >
          <el-option label="显示" :value="1" ></el-option>
          <el-option label="隐藏" :value="2" ></el-option>
        </el-select>
      </el-form-item>
      <el-button size="small" icon="el-icon-search" @click="search()"
        >查询</el-button
      >
      <el-button
        size="small"
        type="primary"
        icon="el-icon-plus"
        @click="showModal()"
        >添加</el-button
      >
    </el-form>
    <el-table
      border
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column label="序号" align="center">
        <template slot-scope="scope">
          {{ scope.$index + 1 + (pageInfo.pageindex - 1) * pageInfo.pagesize }}
        </template>
      </el-table-column>
      <el-table-column prop="question" label="问题" align="center">
      </el-table-column>
      <el-table-column prop="answer" label="回答" align="center">
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <el-switch
            @change="(status) => setActivityStatus(scope.row, status)"
            :value="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" width="180">
        <template slot-scope="scope">
          {{
            scope.row.addTime
              ? `${new Date(scope.row.addTime).Format("YYYY-MM-DD hh:mm:ss")}`
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="300">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            round
            @click="delNotice(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :close-on-click-modal="false"
      title="添加帮助"
      :visible.sync="activityVisible"
    >
      <el-form :model="activityObj" label-width="140px">
        <el-form-item label="问题" required>
          <el-input
            v-model.trim="activityObj.question"
            autocomplete="off"
            maxlength="50"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="答案" required>
          <el-input
            v-model.trim="activityObj.answer"
            type="textarea"
            :row="4"
            autocomplete="off"
            maxlength="300"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="显示状态" required>
          <el-switch
            :value="activityObj.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
          ></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer text-c">
        <el-button size="small" round @click="activityVisible = false"
          >取 消</el-button
        >
        <el-button size="small" round type="primary" @click="submit(1)"
          >提交</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { addListener } from "process";

export default {
  data() {
    return {
      form: {
        question: "",
        status: null
      }, //活动列表筛选条件
      qdForm: {},
      tableData: [], //表格数据
      pageInfo: {
        pagesize: 10,
        pageindex: 1,
        total: 0,
      }, //页码
      activityVisible: false,
      activityObj: {
        id: 0,
        answer: "",
        question: "",
        status: 1,
      },
    };
  },
  beforeMount() {
    this.search();
  },
  methods: {
    //确定搜索条件
    search() {
      this.qdForm = { ...this.form };
      this.getDataList();
    }, //获取表格数据
    getDataList() {
      if(this.qdForm.status === null) {
        delete this.qdForm.status
      }
      let params = {
        ...this.qdForm,
      };
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$ajax
        .getData("adm/helpCenter/list", params)
        .then((data) => {
          loading.close();
          if (data.resData === undefined || data.resData === null) {
            data.resData = {
              data: [],
              count: 0,
            };
          }
          this.tableData = data.resData;
        })
        .catch((error) => {
          loading.close();
          this.$message({
            message: error.codeDes || error.message,
            type: "error",
          });
        });
    },

    //设置活动状态
    setActivityStatus(item, status) {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$ajax
        .postData("adm/helpCenter/setStatus", {
          id: item.id,
          noticeStatus: status,
        })
        .then((data) => {
          loading.close();
          this.$message({
            type: "success",
            message: "操作成功",
          });
          this.getDataList();
        })
        .catch((error) => {
          loading.close();
          this.$message({
            message: error.codeDes || error.message,
            type: "error",
          });
        });
    },

    // 删除公告
    delNotice(id) {
      this.$confirm(`是否确定删除?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          this.$ajax
            .postData("adm/helpCenter/del", {
              id,
            })
            .then((data) => {
              loading.close();
              this.$message({
                type: "success",
                message: `删除成功!`,
              });
              this.getDataList();
            })
            .catch((error) => {
              loading.close();
              this.$message({
                message: error.codeDes || error.message,
                type: "error",
              });
            });
        })
        .catch(() => {});
    },

    showModal() {
      this.activityObj = {
        id: 0,
        answer: "",
        question: "",
        status: 1,
      };
      this.activityVisible = true;
    },
    submit() {
      let params = { ...this.activityObj };
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$ajax
        .postData("adm/helpCenter/edit", params)
        .then((data) => {
          loading.close();
          this.$message({
            type: "success",
            message: "提交成功",
          });
          this.activityVisible = false;
          this.getDataList();
        })
        .catch((error) => {
          loading.close();
          this.$message({
            message: error.codeDes || error.message,
            type: "error",
          });
        });
    },
  },
};
</script>
<style lang="scss" scoped>
</style>
